//封装柱状图
import * as echarts from 'echarts';
import {useEffect,useRef} from 'react'

const BarChar =({title})=>{

    const charRef = useRef(null)

    useEffect(()=>{
        //获取dom元素
        const chartDom =charRef.current

        //图表初始化
        const myChart = echarts.init(chartDom);
        //准备图标参数
        const option = {
            title:{
                text: title
            },
          xAxis: {
            type: 'category',
            data: ['vue', 'react', 'Anger']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [10, 40,  70],
              type: 'bar'
            }
          ]
        };
        
        //使用图标参数完成渲染
        option && myChart.setOption(option);
        
    },[title])

    return (
        <div id = "main" ref = {charRef} style={{height: '400px', width:'500px' }}></div>
    )
}

export default BarChar